<template>
  <div class="role">
    <page-seach :conFig="formConfig" />
    <page-content
      :pageContentConfig="pageContentConfig"
      pageName="role"
      @visibleClick="isVisibleClick"
      @pageUpdateClick="updateClick"
      contentTitle="新建角色"
    />
    <page-model
      ref="pageModelRef"
      :otherInfo="otherInfo"
      :modelConfig="modelConfig"
      :defaultInfo="defaultInfo"
      pageName="role"
    >
      <el-tree
        ref="menusIdRef"
        :data="menus"
        node-key="id"
        show-checkbox
        :props="defaultProps"
        @check="changeData"
      >
      </el-tree>
    </page-model>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, nextTick } from 'vue'
import { useStore } from 'vuex'
import { pageSeach } from '../../../../components/page-seach/index'
import { pageContentConfig } from './config/page-content-config'
import { pageContent } from '../../../../components/page-content/index'
import { formConfig } from './config/search-config'
import { modelConfig } from './config/model-config'
import pageModel from '../../../../components/page-model/index'
import { usePageModel } from '../../../../hooks/page-model'
import { mapMenusToId } from '../../../../utils/map-menus'
import { ElTree } from 'element-plus'
export default defineComponent({
  name: 'role',
  components: {
    pageSeach,
    pageContent,
    pageModel
  },
  setup() {
    const store = useStore()
    const menus = computed(() => store.state.entireMenu)
    let menusIdRef = ref<InstanceType<typeof ElTree>>()
    const roleTree = (item: any) => {
      //console.log(item)
      const menusId = mapMenusToId(item.menuList)
      nextTick(() => {
        menusIdRef.value?.setCheckedKeys(menusId, false)
        //console.log('id=', menusId)
      })
    }
    const [pageModelRef, isVisibleClick, updateClick, defaultInfo] =
      usePageModel(undefined, roleTree)
    const defaultProps = {
      children: 'children',
      label: 'name'
    }
    const otherInfo = ref({})
    const changeData = (data1: any, data2: any) => {
      console.log(data2)
      const checkedKeys = data2.checkedKeys
      const halfCheckedKeys = data2.halfCheckedKeys
      const menuList = [...checkedKeys, ...halfCheckedKeys]
      otherInfo.value = { menuList }
      // console.log('data1:', data1, 'data2:', data2)
    }
    return {
      formConfig,
      modelConfig,
      pageContentConfig,
      pageModelRef,
      menusIdRef,
      isVisibleClick,
      updateClick,
      changeData,

      defaultInfo,
      otherInfo,
      menus,
      defaultProps
    }
  }
})
</script>

<style scoped></style>
